<template>
    <div class="type">
        <h1>品类管理---添加品类</h1>
        <div class="content">
            <el-form label-width="80px">
                <el-form-item label="所属名称">
                    <el-select v-model="value" placeholder="请选择" class="sele" @change="sele">
                        <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="所属名称">
                    <el-input type="text" v-model="categoryName"></el-input>
                </el-form-item>
                <el-button type="primary" size="middle" class="btn" @click="subMit">提交</el-button>
            </el-form>

        </div>
    </div>
</template>

<script>
import { getCategory,addCategory } from '@/utils/API'
export default {
    data() {
        return {
            options: [],
            categoryName: '',
            parentId:0,
            value:''
        }
    },
    methods: {
        render() {
            getCategory({ category: this.category }).then(res => {
                this.options = res
                // console.log(this.options);
            })
        },
        sele(a){
            console.log(a);
        },
        subMit(){
            addCategory({parentId:this.parentId,categoryName:this.categoryName}).then(res=>{
                console.log(res);
              
                this.$router.push('/categroy')
            })
        }
    },
    mounted() {
        this.render()
    },
}
</script>

<style lang="scss" scoped>
.type {
    width: 100%;
    height: 100vh;

    h1 {
        font-weight: normal;
        font-size: 40px;
    }
    .content{
        width: 300px;
        .btn{
            margin-left: 80px;
        }
    }
}
</style>

